<!---->
<template>
  <div class="warp-box">
    <div class="nav-box mb-[32px]">
      <div class="nav-ul">
        <template v-for="(item, index) in navList">
          <div
            :class="[item.key === navItem.key && 'active']"
            class="nav-item"
            @click="navItemClick(item)"
          >
            {{ item.name }}
          </div>
        </template>
      </div>
    </div>
    <div class="center-box">
      <component  :is="navItem.component" />
    </div>
  </div>
</template>
<script  setup>
import { onMounted, ref } from 'vue'
import ShuiZhiFenXi from "./水质分析/index.vue";
import ShuiLiangeFenXi from "./水量分析/index.vue";
import DianHaoFenXi from "./电耗分析/index.vue";
import YaoHaoFenXi from "./药耗分析/index.vue";
const navList = ref([
  {
    key: '水质分析',
    name: '水质分析',
    component: ShuiZhiFenXi
  },
  {
    key: '水量分析',
    component: ShuiLiangeFenXi,
    name: '水量分析',
  },
  {
    key: '电耗分析',
    component: DianHaoFenXi,
    name: '电耗分析',
  },
  {
    component: YaoHaoFenXi,
    key: '药耗分析',
    name: '药耗分析',
  },
])
const navItem = ref({})
const navItemClick = (item) => {
  navItem.value = item
}
onMounted(() => {
  // 默认选中第一个
  if (navList.value.length > 0) {
    navItem.value = navList.value[0]
  }
})
</script>

<style scoped lang="scss">

.warp-box {
  padding: 107px 32px;
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.nav-box {
  display: flex;
  justify-content: space-evenly;
  padding-top: 32px;
}

.nav-ul {
  display: flex;
  justify-content: space-between;
}

.nav-item {
  background-image: url('@/assets/images/btn-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 168px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  cursor: pointer;
  margin: 0 4px;
  &:hover {
    background-image: url('@/assets/images/btn-bg-active.png');
  }
}

.nav-item.active {
  background-image: url('@/assets/images/btn-bg-active.png');
}

.center-box {
  height: 100%;
  overflow-y: auto;
  //padding-top: 46px;
}
</style>
